<template>
 
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
  
      <div class="common-form" >添加</div>

   

      <el-form-item label="绑定商品">
        <!-- <el-select v-model="form.product_id" placeholder="请选择">
          <el-option v-for="(item,index) in productList" :key="index" :label="item.product_name"
                     :value="item.product_id"></el-option>
        </el-select> -->
        <el-input class="max-w460" v-model="product_name" placeholder="请选择商品" readonly=""></el-input>
        <el-button  @click="chooseProduct" type="success">选择</el-button>
        
      </el-form-item>

      <el-form-item label="赠品名称" prop="product_name" :rules="[{required: true,message: '请输入赠品名称'}]">
        <el-input class="max-w460" v-model="form.product_name" placeholder="请输入赠品名称"></el-input>
      </el-form-item>
   
      <el-form-item label="赠品图片（比例1：1）：">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openProductUpload('image','image')">选择图片</el-button>
          <div v-if="form.image_id!=''" class="img mt10">
            <img :src="form.image" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>

   
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>


     <!--商品图片组件-->
     <Upload v-if="isProductUpload" :config="config" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">
      上传图片
    </Upload>

     <!--商品选择-->
     <Product :isproduct="isproduct" :excludeIds="exclude_ids" :islist="false" @closeDialog="closeProductFunc"></Product>
  </div>
</template>

<script>
import giftProductApi from '@/api/giftproduct.js';
import Upload from '@/components/file/Upload';
import Product from '@/components/product/Product.vue';
export default {
  components: {
    Upload,
    Product
  },
  data() {
    return {
      /*form表单数据*/
      isProductUpload:false,
      form: {
        product_name: '',
        image_id: '',
        product_id: '',
        image:'',
       
      },
      isproduct: false,
      exclude_ids:[],
      /*是否打开添加弹窗*/
      open_add: false,
      productList: [],
      /*是否正在加载*/
      loading: false,
      product_name:''
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },

  methods: {

    chooseProduct(){
      this.isproduct = true;
    },


    /*关闭商品选择*/
    closeProductFunc(e) {
      this.isproduct = false;
    
      if (e.type == 'success') {
        this.form.product_id = e.params.product_id
        this.product_name = e.params.product_name
      }
    },

    /*打开上传图片*/
    openProductUpload: function (file_type, file_name) {
      this.file_name = file_name;
      if (file_type == 'image') {
        this.config = {
          total: 1,
          file_type: 'image'
        };
      } 
      this.isProductUpload = true;
    },

    /*上传商品图片*/
    returnProductImgsFunc(e) {
      if (e != null) {
          this.form.image_id = e[0].file_id;
          this.form.image = e[0].file_path;

      }
      this.isProductUpload = false;
    },

    onSubmit() {
      let self = this;
      let form = self.form;
      console.log('提交数据',form);
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          giftProductApi.addProduct(form, true)
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                self.$message({
                  message: '恭喜你，添加成功',
                  type: 'success'
                });
                self.$router.push('/giftproduct/giftproduct/index');
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });


    },

    /*获取商品列表*/
    getTableList() {
      giftProductApi.getProduct('', true)
        .then(res => {
          this.productList = res.data.list;
         
        })
        .catch(error => {

        });
    },

    /*打开弹出层*/
    addClick() {
      this.open_add = true;
    },

    /*关闭获取用户弹窗*/
    closeDialogFunc(e) {
      if (e.type != 'error') {
        this.user_info = e.params[0];
        console.log(this.user_info);
        this.form.user_id = e.params[0].user_id;
      }
      this.open_add = false;
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }


  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
